<template>
	<view class="app-container">
		<!-- 密码登录 -->
		<view class="top">
			<image src="/src/static/icon/logo.png" mode="widthFix" class="logo"></image>
			<view class="title">
				欢迎注册银迅伙伴
			</view>
		</view>
		<view class="app-container__item">
			<!--注册-->
			<view class="content">
				<view class="input-border">
					<view class="label">手机号</view>
					<view class="line">

					</view>
					<input v-model="formData.phone" type="number" maxlength="11" placeholder="请输入手机号"
						class="input width-75" @input="(e) => inputChange(e, 'phone')" />
				</view>
				<view class="input-border">
					<view class="label">验证码</view>
					<view class="line">

					</view>
					<view class="width-75 sms">
						<input v-model="formData.code" type="number" class="input " placeholder="请填写验证码" :maxlength="6"
							@input="(e) => inputChange(e, 'code')" />
						<!-- <text class="getCode" slot="right" @click="sendCode('REGISTER', formData.phone)">{{ buttonText }}</text> -->
						<button @click="sendCode('REGISTER', formData.phone)" :disabled="isSend" size="mini"
							class="getCode">
							{{ buttonText }}
						</button>
					</view>

				</view>
				<view class="input-border">
					<view class="label">密码</view>
					<view class="line">

					</view>
					<input v-model="formData.password" type="password" placeholder="请输入密码" class="input width-75"
						@input="(e) => inputChange(e, 'password')" />
				</view>
			</view>
			<view>
				<button class="btnBox" @click="registerBtn()">注册</button>
			</view>
			<view class="text-gray bottom">
				<checkbox-group class="checkRadio" @change="checkboxChange">
					<label>
						<checkbox value="checkValue" style="transform: scale(0.6)" />登录即代表同意 <text
							class="blue">《服务使用政策》</text>和 <text class="blue"> 《隐私政策》</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import {
		showToast
	} from "@/utils/toast";
	import check from "@/utils/check";
	import usePassword from "@/hook/usePassword";
	import {
		useStore
	} from "@/store/index";
	import useVerifyCode from "@/hook/useVerifyCode";
	import {
		register
	} from "@/api/mine";
	import {
		removeBlankReg
	} from "@/utils/regExp";
	// 注册发送验证码hook
	const [{
		buttonText,
		isSend
	}, {
		sendCode
	}] = useVerifyCode("发送验证码");
	// 注册密码校验hook
	const [validatePassword, validateSinglePassword, validateTwoPassword] =
	usePassword();
	// store实例
	const store = useStore();
	onLoad(() => {});

	onShow(() => {});
	let selectLogin = (val) => {
		console.log("val", val);
		currentType.value = val;
	};
	// 登录方式切换
	let loginList = ref([{
			label: "账号登录",
			value: 0,
		},
		{
			label: "验证码登录",
			value: 1,
		},
	]);
	let currentType = ref(0);
	let checkValue = ref(false);
	// 登录数据
	let formData = reactive({
		password: null,
		phone: null,
		code: null,
		terminal: 'MERCHANT',
		oemUserNo: 'BU100002'
		// type: "REGISTER",
	});
	// 获取短信验证码
	let getCode = () => {
		if (!formData.phone) {
			showToast("请输入手机号", "none");
			return;
		}
		let checkStatus = check.isPhone(formData.phone);
		if (!checkStatus) {
			showToast("请输入正确手机号", "none");
		}
	};
	// 注册信息验证
	let checkData = () => {
		console.log("formData", formData);
		if (!formData.phone) {
			showToast("请输入手机号", "none");
			return;
		}
		if (!formData.code) {
			showToast("请输入验证码", "none");
			return;
		}
		if (!formData.password) {
			showToast("请输入密码", "none");
			return;
		}
		if (formData.password) {
			const passwordStatus = validateSinglePassword(formData.password);
			if (!passwordStatus) {
				return;
			}
		}
		if (!checkValue.value) {
			showToast("请勾选同意用户协议", "none");
			return;
		}
		return true;
	};
	let registerBtn = () => {
		if (checkData()) {
			register(formData).then((res) => {
					if (res.data.code == '200') {
						uni.reLaunch({
							url: "/pages/login/index"
						});
					}
				})
				.catch((error) => {
					showToast(error.data.message || error.data.error);
				});
		}

	};
	let checkboxChange = (val) => {
		console.log("val", val);
		if (val.detail.value.length) {
			checkValue.value = true;
		} else {
			checkValue.value = false;
		}
	};

	function test(val) {
		return val;
	}
	// 密码框禁止输入空格等符号
	function inputChange(e, key) {
		setTimeout(() => {
			formData[key] = removeBlankReg(e.detail.value);
		}, 0);
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>